<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       .title{  
        text-align: center;
        font-weight: bold;
       }
       .content{
        text-align: center;
       }
       form{
        width: 600px;
        margin: 0 auto;
        text-align: center;
       }
    </style>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- 查询 -->
        <form>
            姓名：<input type="text" v-model="queryInfo.name"> 
            年龄：<input type="text" v-model="queryInfo.age">
            性别：<select v-model="queryInfo.sex">
                    <option value="">请选择性别</option>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
                <button type="button" @click="queryUser()">查询</button>
        </form>

        <!-- 表格 -->
        <table width="600px" border="1px" cellspacing="0" align="center">
            <tr class="title">
                <td>编号</td>
                <td>姓名</td>
                <td>年龄</td>
                <td>性别</td>
                <td>身高</td>
                <td>地址</td>
                <td>操作</td>
            </tr>
            <tr class="content" v-for="user in users">
                <td>{{ user.id }}</td>
                <td>{{ user.name }}</td>
                <td>{{ user.age }}</td>
                <td>{{ user.sex }}</td>
                <td>{{ user.height }}</td>
                <td>{{ user.address }}</td>
                <td>
                    <button @click="deleleUser(user.id)">删除</button>
                </td>
            </tr>
        </table>
        <hr>

        <!-- 添加 -->
        <form>
            <p>
                编号：<input type="text" v-model="user.id">
            </p>
            <p>
                姓名：<input type="text" v-model="user.name">
            </p>
            <p>
                年龄：<input type="text" v-model="user.age">
            </p>
            <p>
                性别：<input type="radio" value="男" v-model="user.sex">男
                    <input type="radio" value="女" v-model="user.sex">女
            </p>
            <p>
                身高：<input type="text" v-model="user.height">
            </p>
            <p>
                地址：<input type="text" v-model="user.address">
            </p>
            <p>
                <button type="button" @click="addUser">添加</button>
            </p>
        </form>

    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                // 用户列表
                users: [],
                // 新增用户信息
                user: {
                    id: '',
                    name: '',
                    age: '',
                    sex: '男',
                    height: '',
                    address: ''
                },
                // 查询条件信息
                queryInfo: {
                    name: '',
                    age: '',
                    sex: ''
                }
            },
            methods: {
                // 添加用户
                addUser(){
                    // console.log(this.user)
                    // 将新增用户信息添加到数组中
                    this.users.push(this.user)
                    // 将数据保存到localStorage中
                    localStorage.setItem('users', JSON.stringify(this.users))

                    // 重置用户信息
                    this.user = {
                        id: '',
                        name: '',
                        age: '',
                        sex: '男',
                        height: '',
                        address: ''
                    }
                },
                // 删除用户
                deleleUser(id){
                    var flag = confirm('确定要删除吗？')
                    if(!flag){
                        return
                    }
                    // console.log(id) 
                    for(var i=0; i<this.users.length; i++){
                        if(this.users[i].id == id){
                            this.users.splice(i, 1) // splice方法用于删除用户，参数：索引，数量
                            break
                        }
                    }
                    // 保存数据
                    localStorage.setItem('users', JSON.stringify(this.users))
                    alert('删除成功！')
                },
                // 查询用户
                queryUser(){
                    // 从localStorage中重新获取数据
                    this.users = JSON.parse(localStorage.getItem('users'))

                    // 循环所有用户
                    for(var i=0; i<this.users.length; i++){
                        // 定义一个变量，表示是否符合条件
                        var flag = true 
                        // 对查询条件进行判断
                        for(var key in this.queryInfo){ // key表示this.queryInfo的属性名，即name, age, sex
                            if(this.queryInfo[key] !='' && this.users[i][key] != this.queryInfo[key]){
                                flag = false // 当前用户不符合条件
                                break
                            }
                        }
                        // 如果flag为false，表示该用户不符合条件，则从this.users删除
                        if(!flag){
                            this.users.splice(i, 1) // splice方法用于删除用户，参数：索引，数量
                            i--
                        }
                    }

                }
            },
            created(){
                // 获取localStorage中的数据
                this.users = JSON.parse(localStorage.getItem('users'))
            }
        })
    </script>
</body>
</html>